<form nz-form [formGroup]="searchForm" class="ant-advanced-search-form" style="margin-bottom: 4px;">
    <div nz-row [nzGutter]="24" class="search-header" style="white-space: nowrap">
        <div nz-col [nzSpan]="5">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="username">角色名</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input class="search-input" nz-input formControlName="username" placeholder="用户名" />
                </nz-form-control>
            </div>
        </div>

        <div nz-col [nzSpan]="5">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="phoneNumber">手机号码</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input class="search-input" nz-input formControlName="phoneNumber" placeholder="000" />
                </nz-form-control>
            </div>
        </div>

        <div nz-col [nzSpan]="5">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="uid">唯一ID</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input class="search-input" nz-input formControlName="uid" placeholder="000" />
                </nz-form-control>
            </div>
        </div>

        <div nz-col [nzSpan]="9">
            <div nz-row>
                <nz-col class="search-button-col">
                    <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="true"
                        (resetEvent)="onReset()" [create]="false"></app-search-button>
                </nz-col>
            </div>
        </div>
    </div>
</form>

<div nz-row style="margin-top: 4px; white-space: nowrap;">
    <nz-table #expandTable nzShowPagination [nzData]="endUsers" 
        nzTableLayout="fixed" [nzFrontPagination]="false"
        [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" 
        (nzQueryParams)="onPageParamChange($event)">
        <thead>
            <tr>
                <th>用户名</th>
                <th>手机号</th>
                <th>用户昵称</th>
                <th>性别</th>
                <th>唯一ID</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let endUser of endUsers">
                <td>{{endUser.username}}</td>
                <td>{{endUser.phoneNumber}}</td>
                <td>{{endUser.nickName}}</td>
                <td>{{endUser.sex}}</td>
                <td>{{endUser.uid}}</td>
                <td [nzEllipsis]="true" style="overflow: hidden;" nzRight>
                    <button nz-button  class="action-button normal-button">编辑</button>
                    <button nz-button  class="action-button delete-button">删除</button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>
